En esta nota de nuestro curso de JavaScript te explicamos el uso de este lenguaje de programación para crear menús desplegables.
El comportamiento predeterminado del objeto seleccionado es proporcionar una lista desplegable. Se muestra el primer elemento de la lista, pero cuando el usuario hace clic en la lista, aparecen las otras opciones.
Un objeto de selección al que se refiere el código debe tener un campo de identificación. El otro elemento en el formulario es un botón. Cuando el usuario hace clic en el botón, se activa la función changeColor().
Debido a que el único elemento en este formulario es el objeto de selección, es posible que desees cambiar el color de fondo inmediatamente sin necesidad de hacer clic en un botón. Puede hacerlo agregando un controlador de eventos directamente en el objeto seleccionado:
<select id = "selColor"
onchange = "changeColor()">
El controlador de eventos hace que la función changeColor() se active tan pronto como el usuario cambie el valor del objeto seleccionado. Por lo general, renunciará al usuario a hacer clic en un botón solo cuando la selección sea el único elemento en el formulario. Si el formulario incluye varios elementos, el procesamiento generalmente no ocurre hasta que el usuario indica que está listo haciendo clic en un botón.
Cómo leer el cuadro de lista
Afortunadamente, las listas desplegables estándar son bastante fáciles de leer. Aquí está el código JavaScript:
<script type = "text/javascript">
// from ejemploList.html
function changeColor(){
var selColor = document.getElementById("selColor");
var color = selColor.value;
document.body.style.backgroundColor = color;
} // end function
</script>
Como puedes ver, el proceso para leer el objeto seleccionado es muy similar a trabajar con un campo de estilo de texto. En la siguiente nota te explicaremos como funciona este código. Mientras tanto, en lo que la publicamos, puedes ver estos dos cursos presenciales.
Curso de Excel.
Curso de C#
